<template>
    <div class="menu-search">
        <search-camp v-bind:words="keyword"></search-camp>
        <div class="menu-header">
            <!-- 点击传参到子组件 -->
            <div class="menu-header-top">
                <div class="top-text" v-on:click="gettopId(1)" v-bind:class="{topactive:top_clickNum==1}">菜谱</div>
                <div class="top-text" v-on:click="gettopId(2)" v-bind:class="{topactive:top_clickNum==2}">笔记</div>
                <div class="top-text" v-on:click="gettopId(3)" v-bind:class="{topactive:top_clickNum==3}">用户</div>
                <div class="top-text" v-on:click="gettopId(4)" v-bind:class="{topactive:top_clickNum==4}">商品</div>
                <div class="top-text" v-on:click="gettopId(5)" v-bind:class="{topactive:top_clickNum==5}">课堂</div>
            </div>
        </div>
        <!-- 这个应该给组件 -->
        <menutop-camp v-bind:cid=top_clickNum></menutop-camp>
    </div>
</template>

<script>
import searchCamp from '@/components/search-camp.vue'
import menutopCamp from '@/components/menu-top-camp.vue'
export default {
    components:{
        searchCamp,
        menutopCamp
    },
    data(){
        return {
            top_clickNum: 1,
            
            menu_header_bottom_list:[],
            keyword:"",
            order:null,
            menufood_list:[],
        }
    },
    methods:{
        gettopId(i){
            this.top_clickNum = i;
        },
        // 获取参数，便于访问
        getparameter(){
            // let _this = this;
            // let url = `https://apis.netstart.cn/douguo/recipe/search`;
            // let promise = axios.get(url,{params:{keyword:_this.keyword,order:0,type:0,offset:0,limit:20}})
            let mydata = JSON.parse(localStorage.getItem("mydata_list"));
            if(mydata){
                mydata[0].keyword = this.keyword;
                console.log(mydata[0].keyword,"keyword");
                localStorage.setItem("mydata_list",JSON.stringify(mydata))
            }else{
                let arr = [];
                let obj = {};
                obj.keyword = this.keyword;
                obj.order = 0
                obj.type = 0;
                obj.offset = 0;
                obj.limit = 20;
                arr.push(obj);
                localStorage.setItem("mydata_list",JSON.stringify(arr));
            }
        }
    },
    created(){
        // console.log(this.$route);
        this.keyword = this.$route.query.keyword;
        console.log(this.keyword);
        this.getparameter();
        // console.log(this.keyword);
        // this.getfoodList();
    }
}
</script>

<style lang="scss">
@import url("../assets/css/style.css");
.menu-search{
    width: 100%;
    overflow-x: hidden;
    .menu-header{
        height: 40px;
        // background-color: red;
        margin-top: 50px;
        .menu-header-top{
            width: 100%;
            height: 40px;
            background-color: pink;
            display: flex;
            justify-content: space-around;
            line-height: 40px;
            font-size: 16px;
            .top-text{
                
                flex-basis: 15%;
                text-align: center;
                box-sizing: border-box;
            
            }
            .topactive{
                border-bottom: 3px solid orange;
            }
        }
        
    }
}
</style>

